import {DiffOutlined} from '@ant-design/icons';
import {ModalForm, ProFormText} from '@ant-design/pro-components';
import {Button} from 'antd';
import React from 'react';

interface SettingGroupModalProp {
  isAdd: boolean;
  settingGroup?: any;
  triggerButton?: React.ReactElement;
  onSubmit: (values: any) => Promise<boolean>;
}

const SettingGroupModal: React.FC<SettingGroupModalProp> = ({isAdd, settingGroup, triggerButton, onSubmit}) => {
  return (
    <ModalForm
      title={isAdd ? '新增设置分组' : '编辑设置分组'}
      trigger={
        triggerButton ? (
          triggerButton
        ) : isAdd ? (
          <Button type="primary" icon={<DiffOutlined />}>
            新增设置分组
          </Button>) :
          (<a>编辑</a>)
      }
      initialValues={settingGroup}
      autoFocusFirstInput
      modalProps={{ destroyOnClose: true }}
      onFinish={async (values) => {
        return await onSubmit(values);
      }}
      width={480}
    >
      <ProFormText
        name="name"
        label="分组名称"
        rules={[{ required: true, message: '请输入分组名称' }]}
      />
      <ProFormText
        name="groupKey"
        label="分组键值"
        rules={[{ required: true, message: '请输入分组键值' }]}
      />
    </ModalForm>
  );
};

export default SettingGroupModal;
